<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟1</title>
		<style>
			#canvas{
			    border: 1px solid chocolate;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="600" height="600"></canvas>
		<div></div>
		<script>
			var canvas = document.getElementById('canvas');
			var c = canvas.getContext('2d');
			c.font = '25px 微软雅黑';
			
			function renderClock(){
				c.save()
				// 将坐标移动到画布中央
				c.translate(300,300)
				// c.rotate(-2*Math.PI/4)
				
				c.save()
				// 绘制表盘
				c.beginPath()
				c.arc(0,0,200,0,2*Math.PI,true)
				c.strokeStyle = 'darkgray'
				c.lineWidth = 10
				c.stroke()
				c.closePath()
				
				// 绘制分针刻度
				for(var i = 0; i < 60; i++){
					c.rotate(Math.PI/30)
					c.beginPath()
					c.moveTo(180,0)
					c.lineTo(190,0)
					c.strokeStyle = 'darkorange'
					c.lineWidth = 2
					c.stroke()
					c.closePath()
				}
				// 恢复保存
				c.restore()
				c.save()
				
				// 绘制时针刻度
				for(var j = 0; j < 12; j++){
					c.rotate(Math.PI/6)
					c.beginPath()
					c.moveTo(180,0)
					c.lineTo(200,0)
					c.strokeStyle = 'darkgray'
					c.lineWidth = 10
					c.stroke()
					c.closePath()
				}
				c.restore()
				c.save()
				
				//画数字时间
				var hour = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
				hour.forEach(function(num,i){
					var rad = 2 * Math.PI / 12 * i
					var x = Math.cos(rad) * 165
					var y = Math.sin(rad) * 165
					c.font = "18px sans-serif"
					c.textAlign = "center"
					c.textBaseline = "middle"
					c.fillStyle='red'
					c.fill()
					c.fillText(num, x, y)
				});
				c.restore()
				c.save()
						
				// 获取时间
				var time = new Date()
				var h = time.getHours()
				var m = time.getMinutes()
				var s = time.getSeconds()
				// h = h > 12 ? h - 12 : h
				m = m < 10 ? '0' + m : m
				s = s < 10 ? '0' + s : s
				t = h + ':' + m + ':' + s
				c.font = "20px"
				c.textAlign = "center"
				c.textBaseline = "middle"
				c.fillText(t, 0, 115)
				
				// 绘制秒针
				c.beginPath()
				c.rotate(2*Math.PI/60*s - Math.PI/2)
				c.moveTo(-30,0)
				c.lineTo(170,0)
				c.lineWidth = 2
				c.strokeStyle = 'red'
				c.stroke()
				c.closePath()
				
				c.restore()
				c.save()
				
				// 绘制分针
				c.beginPath()
				c.rotate(2*Math.PI/60*m + 2*Math.PI/3600*s - Math.PI/2)
				c.moveTo(-22,0)
				c.lineTo(150,0)
				c.lineWidth = 4
				c.strokeStyle = '#848484'
				c.stroke()
				c.closePath()
				
				c.restore()
				c.save()
				
				// 绘制时针
				c.beginPath()
				c.rotate(2*Math.PI/12*h + 2*Math.PI/60/12*m + 2*Math.PI/12/60/60*s - Math.PI/2)
				c.moveTo(-15,0)
				c.lineTo(100,0)
				c.lineWidth = 8
				c.strokeStyle = '#848484'
				c.stroke()
				c.closePath()
				
				// 绘制原心
				c.beginPath()
				c.arc(0,0,7,0,2*Math.PI)
				c.fillStyle = '#2ECCFA'
				c.fill()
				c.lineWidth = 4
				c.strokeStyle = '#0489B1'
				c.stroke()
				c.closePath()
				
				c.restore()
				c.restore()
			}
			setInterval(function(){
				// 清除
				c.clearRect(0,0,600,600)
				renderClock()
			}, 1000)
		</script>
	</body>
</html>
